<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="utf-8">
  <title>米塔云平台管理系统</title>
  <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
  <link href="../customize/css/iconfont.css" rel="stylesheet">
  <link href="../layuiadmin/layui/css/layui.css" rel="stylesheet">
  <!-- <link href="../customize/css/layui-tree.css" rel="stylesheet"> -->
  <link href="../customize/css/content.css" rel="stylesheet">
  <style>
    a{color:#007bff;}
    a:hover{color:#0056b3;}
    #deviceListTree{ height: 820px; overflow-y: auto;}
    .nav-tabs{ border-bottom: 1px solid #1677FF;}
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{ border-color: rgba(22, 119, 255, 0.5) rgba(22, 119, 255, 0.5) #1677ff;}
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ border-color: #1677FF #1677FF #fff;}
    .nav-tabs .nav-link{ border-top-left-radius: 0; border-top-right-radius: 0;}
    .data-section{ padding: 20px; height: 140px; border-radius: 2px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3); position: relative;}
    .data-section.sec1{ background: url(../customize/images/icon/device-sec-bg1.png) no-repeat right bottom; }
    .data-section.sec2{ background: url(../customize/images/icon/device-sec-bg4.png) no-repeat right bottom; }
    .data-section.sec4{ background: url(../customize/images/icon/device-sec-bg2.png) no-repeat right bottom; }
    .arrow-data{ left: 20px; bottom: 20px;}
    .modal-chart{ width: 100%;}
    .charge-span{ position: absolute; font-size: 12px; text-align: center; font-weight: 600;}
    .charge-span.month{ top: 57px; left: 18px; width: 93px; font-size: 14px;}
    .charge-span.today{ top: 80px; left: 91px; width: 63px;}
    .charge-span.yesterday{ top: 35px; left: 102px; width: 48px;}
  </style>
</head>
<body>
<div class="m-3">
  <div class="d-flex">
    <div class="custom-section" style="width: 296px;">
      <div class="font-weight-bold mb-2">设备列表</div>
      <div class="input-group mb-3">
        <input type="text" class="form-control" id="pram_id" placeholder="快捷查询">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" onclick="loadTree()"><i class="iconfont icon-dituyechaxun"></i></button>
        </div>
      </div>
      <div class="font-p14" id="deviceListTree"></div>
    </div>
    <div class="ml-3 flex-1">
      <div class="custom-section mb-3">
        <div class="mb-3">
          <span id="provinceName"></span> &gt;
          <span id="cityName"></span> &gt;
          <span id="enterpriseName"></span> &gt;
          <span class="text-primary" id="device-id"></span>
        </div>
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" href="#" onclick="showSection(this, 0)">基本信息</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" onclick="showSection(this, 1)">用电分析</a>
          </li>
        </ul>
      </div>
      <!-- 基本信息 -->
      <div class="device-section" id="device_section_0">
        <div class="d-flex">
          <div class="custom-section flex-1">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <div>
                <strong id="deviceName-id">设备名称</strong> &nbsp;&nbsp; <small class="text-secondary" id="deviceSn-id"></small>
              </div>
              <div class="font-p14" id="status-div"></div>
            </div>
            <div class="border align-items-center justify-content-center d-flex" style="height: 297px;">
<!--            <img src="../customize/images/no-picture.png" alt="" id="image-id"  class="bg-secondary" style="height: 297px;width: 740px;">-->
            <img class="img-fluid" style="max-height: 295px" src="../customize/images/no-picture.png" alt="" id="image-id" >
            </div>
          </div>
          <div class="custom-section flex-1 ml-3">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <strong>生产时长</strong>
              <a class="font-p14" href="##" onclick="viewMore('time')">更多 &gt;</a>
            </div>
            <div class="font-p24 font-weight-bold text-center">
              当日生产时长&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-primary" id="scsc_id">0h</span>
            </div>
            <div class="chart" id="chart_bar1" style="height: 246px"></div>
          </div>
        </div>
        <div class="d-flex mt-3">
          <div class="custom-section flex-1">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <div>
                <strong id="cj_name">采集设备名称</strong>
                <small class="text-secondary" id="cj_bh">编号:0</small>
                <small class="text-secondary" id="zh_id">站号:0</small>
              </div>
              <div class="font-p14 d-none" id="cj_status"><i class="iconfont icon-gongzuo mr-1 text-powerOn"></i> 运行中</div>
            </div>
            <div class="d-flex">
              <div class="flex-1">
                <div class="data-section sec1">
                  <div class="font-p16 font-weight-bold mb-3">数据时间</div>
                  <div class="text-number text-center font-p40 text-primary" id="dataTime_id">00:00:00</div>
                </div>
                <div class="data-section sec3 mt-3">
                  <div class="font-p16 font-weight-bold mb-3">维保情况</div>
                  <div class="text-center pt-1">
                    <div class="d-inline-block" style="border: 1px solid #74CFE2;padding: 0 5px;">
                      <div class="text-primary d-flex" style="margin-top: -0.6rem; height: 52px; background: #fff; padding: 0 5px;">
                        <div class="text-number font-p52" id="day_id">0</div>
                        <div class="text-right font-p12">
                          <div class="text-nowrap">倒计时</div>
                          <div class="mt-2">天</div>
                        </div>
                      </div>
                    </div>
                  </div>
<!--                  <div class="text-right font-p14 font-weight-bold position-absolute arrow-data text-nowrap">上次维保时间&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-primary">19-10-11</span></div>-->
                </div>
              </div>
              <div class="flex-1 ml-3">
                <div class="data-section sec2">
                  <div class="d-flex justify-content-between align-items-start"id="offset_id">
                    <div class="font-p16 font-weight-bold" >位置偏移</div>

                    <!-- 下为关状态图标 -->
                    <!-- <svg t="1592207437299" class="icon" viewBox="0 0 1732 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5049" width="44" height="26"><path d="M346.584615 187.076923h1039.753847c191.409231 0 346.584615 145.447385 346.584615 324.923077s-155.175385 324.923077-346.584615 324.923077H346.584615C155.175385 836.923077 0 691.475692 0 512s155.175385-324.923077 346.584615-324.923077z" fill="#7C89A6" p-id="5050"></path><path d="M727.394462 512c0 277.661538 225.083077 502.784 502.784 502.784C1507.84 1014.784 1732.923077 789.661538 1732.923077 512S1507.84 9.255385 1230.178462 9.255385C952.516923 9.255385 727.394462 234.338462 727.394462 512z" fill="#D9DFE9" p-id="5051"></path></svg> -->
                  </div>
                  <div class="font-p14 font-weight-bold position-absolute arrow-data">当前状态&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-primary" id="status_id">开启</span></div>
                </div>
                <div class="data-section sec4 mt-3">
                  <div class="font-p16 mb-3 font-weight-bold">上次维保时间</div>
                  <div class="text-number text-center font-p36 text-primary" id="time_id">00-00-00</div>
                </div>
              </div>
            </div>
          </div>
          <div class="custom-section flex-1 ml-3">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <strong>设备使用率</strong>
              <a class="font-p14" href="##" onclick="viewMore('usage')">更多 &gt;</a>
            </div>
            <div class="w-50 mx-auto">
              <div class="font-p16 font-weight-bold text-center mb-2"><i class="fa fa-square font-p12" style="color: #29D897"></i> 平均使用率</div>
              <div class="progress" style="height: 30px; border-radius: 3px">
                <div class="progress-bar text-right" style="width: 0%; background-color: #29D897; font-size: 16px;"id="syl_id">0%</div>
              </div>
            </div>
            <div class="chart" id="chart_line1" style="height: 234px"></div>
          </div>
        </div>
      </div>

      <!-- 用电分析 -->
      <div class="d-none device-section" id="device_section_1">
        <div class="d-flex">
          <div class="custom-section flex-1">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-2">
              <strong>今日用电量</strong>
              <a class="font-p14" href="##" onclick="viewMore('electric')">更多 &gt;</a>
            </div>
            <div class="font-p24 font-weight-bold text-center">
              累计电量&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-primary" id="ljdl_id">0kWh</span>
            </div>
            <div class="text-right font-p14 mb-1">
              <i class="fa fa-square" style="color: #009AEA"></i> 低谷&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="fa fa-square" style="color: #F2CB6B"></i> 平段&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="fa fa-square" style="color: #FF8B35"></i> 高峰&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="chart" id="chart_bar2" style="height: 251px"></div>
          </div>
          <div class="custom-section flex-1 ml-3">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <strong>用电分析</strong>
              <a class="font-p14" href="##" onclick="viewMore('analysis')">详情 &gt;</a>
            </div>
            <div class="d-flex">
              <div class="flex-1">
                <div class="chart" id="chart_radar" style="height: 297px"></div>
              </div>
              <div class="mt-2">
                <div class="text-secondary font-p14 pl-1 mb-1">健康指数</div>
                <div class="text-primary d-flex">
                  <span class="text-number font-p52" id="jkzs_fs">0</span>
                  <span class="font-p12 mt-4">分</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="d-flex mt-3">
          <div class="custom-section flex-1">
            <div class="d-flex justify-content-between align-items-end pb-3 border-bottom mb-3">
              <strong>实时功率</strong>
              <a class="font-p14" href="##" onclick="viewMore('power')">更多 &gt;</a>
            </div>
            <div class="chart" id="chart_line2" style="height: 297px"></div>
          </div>
          <div class="custom-section flex-1 ml-3">
            <div class="pb-3 border-bottom mb-3">
              <strong>用电统计</strong>
            </div>
            <div class="d-flex">
              <div class="flex-1">
                <div class="font-weight-bold font-p16 text-center mb-2">电价（元/kWh）</div>
                <div class="chart" id="chart_pictorialBar1" style="height: 182px"></div>
              </div>
              <div class="flex-1">
                <div class="font-weight-bold font-p16 text-center mb-2">电费（万元）</div>
                  <div class="position-relative mx-auto text-white" style="width: 172px; height: 147px; margin-top: 15px;">
                      <img src="../customize/images/statistics-bg.png" alt="">
                      <span class="charge-span month" id="thisMonth_id">0</span>
                      <span class="charge-span today" id="today_id">0</span>
                      <span class="charge-span yesterday" id="yesterday_id">0</span>
                  </div>
                <div class="d-flex justify-content-center font-weight-bold font-p14">
                  <div><span class="mr-2" style="color: #F6BD16;border-left: 3px solid;"></span> 本月</div>
                  <div class="mx-4"><span class="mr-2" style="color: #5B8FF9;border-left: 3px solid;"></span> 当日</div>
                  <div><span class="mr-2" style="color: #82D0EF;border-left: 3px solid;"></span> 昨日</div>
                </div>
              </div>
            </div>
            <div class="d-flex font-p14 pt-3 mt-3" style="border-top: 1px dashed #D1E6F9">
              <div class="flex-1">
                <div class="d-flex justify-content-between mb-2">
                  <strong>实时有功</strong>
                  <div class="text-primary"><span id="ssyg_id">0</span> kW</div>
                </div>
                <div class="d-flex justify-content-between">
                  <strong>实时无功</strong>
                  <div class="text-primary"><span id="sswg_id">0</span> kVar</div>
                </div>
              </div>
              <div class="flex-1 ml-3">
                <div class="d-flex justify-content-between mb-2">
                  <strong>功率因数</strong>
                  <div class="text-primary"><span id="glys_id">0</span></div>
                </div>
                <div class="d-flex justify-content-between">
                  <strong>负载率</strong>
                  <div class="text-primary"><span id="fzl_id">0</span> %</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- modal -->
<div class="modal fade" id="viewMoreModal_time" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content text-body">
      <div class="modal-header">
        <div class="modal-title"><i class="iconfont icon-juxing"></i> 生产时长</div>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        <form class="form-row align-items-center mb-3">
          <div class="col-auto">
            <strong class="font-p14">条件查询：</strong>
          </div>
          <div class="col-auto">
            <input class="form-control time-picker" name="" id="searchTimeBegin_time" type="text" placeholder="开始时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <input class="form-control time-picker" name="" id="searchTimeEnd_time" type="text" placeholder="结束时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" type="button" onclick="loadProductionTimeData($('#searchTimeBegin_time').val(),$('#searchTimeEnd_time').val())"><i class="iconfont icon-dituyechaxun"></i> 查询</button>
          </div>
        </form>
        <div class="chart modal-chart" id="modalChart_time" style="height: 400px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="viewMoreModal_usage" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content text-body">
      <div class="modal-header">
        <div class="modal-title"><i class="iconfont icon-juxing"></i> 设备使用率</div>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        <form class="form-row align-items-center mb-3">
          <div class="col-auto">
            <strong class="font-p14">条件查询：</strong>
          </div>
          <div class="col-auto">
            <input class="form-control time-picker" name="" id="searchTimeBegin_usage" type="text" placeholder="开始时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <input class="form-control time-picker" name="" id="searchTimeEnd_usage" type="text" placeholder="结束时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" type="button" onclick="loadEquipmentUsage($('#searchTimeBegin_usage').val(),$('#searchTimeEnd_usage').val())"><i class="iconfont icon-dituyechaxun"></i> 查询</button>
          </div>
        </form>
        <div class="chart modal-chart" id="modalChart_usage" style="height: 400px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="viewMoreModal_electric" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content text-body">
      <div class="modal-header">
        <div class="modal-title"><i class="iconfont icon-juxing"></i> 用电量</div>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        <form class="form-row align-items-center mb-3">
          <div class="col-auto">
            <strong class="font-p14">条件查询：</strong>
          </div>
          <div class="col-auto">
            <input class="form-control time-picker form-datatime" name="" id="searchTimeBegin_electric" type="text" placeholder="开始时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <input class="form-control time-picker form-datatime" name="" id="searchTimeEnd_electric" type="text" placeholder="结束时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" type="button"onclick="loadTodayElectricityData($('#searchTimeBegin_electric').val(),$('#searchTimeEnd_electric').val())"><i class="iconfont icon-dituyechaxun"></i> 查询</button>
          </div>
        </form>
        <div class="d-flex justify-content-center mt-4 font-p24">
          <div class="statistical-data-border text-center">
            累计电量<strong class="ml-3 text-primary" id="ljdlgd_id">0kWh</strong>
          </div>
          <div class="statistical-data-border text-center ml-5">
            预估电费<strong class="ml-3 text-primary" id="ygdf_id">0万元</strong>
          </div>
        </div>
        <div class="text-right font-p14 mb-1">
          <i class="fa fa-square" style="color: #009AEA"></i> 低谷&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="fa fa-square" style="color: #F2CB6B"></i> 平段&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="fa fa-square" style="color: #FF8B35"></i> 高峰&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="chart modal-chart" id="modalChart_electric" style="height: 300px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="viewMoreModal_power" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content text-body">
      <div class="modal-header">
        <div class="modal-title"><i class="iconfont icon-juxing"></i> 功率</div>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        <form class="form-row align-items-center mb-3">
          <div class="col-auto">
            <strong class="font-p14">条件查询：</strong>
          </div>
          <div class="col-auto">
            <input class="form-control time-picker form-datatime" name="" id="searchTimeBegin_power" type="text" placeholder="开始时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <input class="form-control time-picker form-datatime" name="" id="searchTimeEnd_power" type="text" placeholder="结束时间" autocomplete="off">
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" type="button" onclick="loadRealPowerData($('#searchTimeBegin_power').val(),$('#searchTimeEnd_power').val())"><i class="iconfont icon-dituyechaxun"></i> 查询</button>
          </div>
        </form>
        <div class="chart modal-chart" id="modalChart_power" style="height: 400px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="viewMoreModal_analysis" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content text-body">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i> 用电分析</div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <form class="form-row align-items-center mb-3">
                    <div class="col-auto">
                        <strong class="font-p14">条件查询：</strong>
                    </div>
                    <div class="col-auto">
                        <input class="form-control time-picker form-datatime" name="" id="searchTimeBegin_analysis" type="text" placeholder="开始时间" autocomplete="off">
                    </div>
                    <div class="col-auto">
                        <input class="form-control time-picker form-datatime" name="" id="searchTimeEnd_analysis" type="text" placeholder="结束时间" autocomplete="off">
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-primary" type="button" onclick="loadElectricityAnalysisData($('#searchTimeBegin_analysis').val(),$('#searchTimeEnd_analysis').val())"><i class="iconfont icon-dituyechaxun"></i> 查询</button>
                    </div>
                </form>
                <div class="chart modal-chart" id="modalChart_analysis" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.min.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../layuiadmin/layui/layui.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/echarts.min.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/deviceList.js"></script>
</body>
</html>